<template>
	<view class="content u-p-l-30 u-p-r-30">
		<view class="u-p-t-30">
			<view class="u-bg-white u-radius-8 u-m-b-20" v-for="(item,index) in state.list" :key='index'>
				<view class="u-flex u-p-20" @click="toDetail(item.lucky_id)">
					<up-image :show-loading="true" :src="item.lucky.cover" width="80px" height="80px"></up-image>
					<view class="u-m-l-20 u-p-t-10 u-font-28">
						<p class="u-font-30">{{item.lucky.name}}</p>
						<view class="u-m-t-20 u-content-color">开奖号码：<text class="u-error-dark">{{item.lucky.draw||'暂未开奖'}}</text></view>
						<p class="u-m-t-10 u-content-color">结束时间：{{item.lucky.end}}</p>
					</view>
				</view>
				<view class="u-rela">
					<view class="u-dot-left u-abso"></view>
					<view class="u-dot-right u-abso"></view>
					<view class="u-m-l-25 u-m-r-25"><up-line dashed></up-line></view>
				</view>
				<view v-if="item.lucky.is_end==2" class="u-flex u-font-28 u-flex-between u-flex-items-center u-p-20">
					<p class="u-light-color"></p>
					<up-tag text="进行中" type="error" shape="circle" plain plainFill size="mini"></up-tag>
				</view>
				<block v-else>
					<block v-if="item.lucky.draw_user_id===userInfo.id">
						<view class="u-flex u-font-28 u-flex-between u-flex-items-center u-p-20">
							<up-tag text="恭喜你，中奖了" type="error" shape="circle" size="mini"></up-tag>
							<view class="u-flex u-flex-middle" v-if="item.cash_address&&item.cash_address.status===1" @click="getAddress(item.lucky_id)">
								<text class="u-light-color">修改地址</text>
								<up-icon name="arrow-right" color="#ccc" size="14"></up-icon>
							</view>
							<view v-else class="u-flex u-flex-middle" @click="getAddress(item.lucky_id)">
								<text class="u-light-color">选择地址</text>
								<up-icon name="arrow-right" color="#ccc" size="14"></up-icon>
							</view>
						</view>
						<view v-if="item.cash_address" class="u-rela">
							<view class="u-dot-left u-abso"></view>
							<view class="u-dot-right u-abso"></view>
							<view class="u-m-l-25 u-m-r-25"><up-line dashed></up-line></view>
							<view class="u-font-26 u-content-color u-flex-between u-flex-items-center u-p-20">
								<view class="u-flex u-flex-between">
									<view>
										<text>收货地址：</text>
										<text>
											{{item.cash_address.contact}} 
											{{item.cash_address.phone}} 
											{{item.cash_address.province_name}}
											{{item.cash_address.city_name}}
											{{item.cash_address.region}}
											{{item.cash_address.address}}
										</text>
									</view>
								</view>
								<view class="u-m-t-10 u-flex">
									<text>物流单号：</text>
									<!-- 兑奖状态  1：未发货 2：已发货  3：已收货  有这个字段  -->
									<text class="u-light-color" v-if="item.cash_address.status===2">待发货</text>
									<view v-else-if="item.cash_address.status===1" @click="copyNum(item.cash_address.tracking_num)">
										<text class="u-primary-dark u-m-r-10">{{item.cash_address.tracking_num}}9283474673838</text>
										<text class="u-primary-dark">复制</text>
									</view>
								</view>
								<view class="u-m-t-10 u-light-color">
									<text>备注：</text>
									<text>发货后不支持修改邮寄地址</text>
								</view>
							</view>
						</view>
					</block>
					<view v-else class="u-flex u-font-28 u-flex-between u-flex-items-center u-p-20">
						<p class="u-light-color"></p>
						<up-tag text="很遗憾，未中奖" type="success"  plain plainFill shape="circle" size="mini"></up-tag>
					</view>
				</block>
			</view>
		</view>
		<!-- 加载状态提示 -->
		<view class="u-text-center u-p-t-20" v-if="state.loading === 'loading'">
			<up-loading-icon mode="circle"></up-loading-icon>
			<text class="u-m-l-10">加载中...</text>
		</view>
		<view class="u-text-center u-p-t-20 u-info u-font-26" v-if="state.loading === 'nomore'">
			没有更多数据了
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		reactive,
	} from 'vue';
	import {
		REQUEST_SUCCESS
	} from '/utils/config.js';
	import {
		useAuth
	} from '/composables/useAuth';
	import {
		useStore
	} from 'vuex';
	import createApi from '/api/commonAPI.js';
	const store = useStore();
	const commonAPI = createApi(store);
	
	// 计算属性，用于获取 Vuex 中的状态
	const {
		token,
		userInfo,
	} = useAuth();
	
	const state = reactive({
		list: [],
		page: 1,
		pageSize: 10,
		loading: 'loadmore', // 加载状态，可选值：'loadmore', 'loading', 'nomore'
		address:''
	});
	// 使用 onLoad 生命周期事件
	onLoad(async () => {
		// 初始化时重置分页
		state.page = 1;
		state.list = [];
		state.loading = 'loadmore';
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		// 加载第一页数据
		getJoinHistory();
	});
	function reloadHistory(){
		// 初始化时重置分页
		state.page = 1;
		state.list = [];
		state.loading = 'loadmore';
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		// 加载第一页数据
		getJoinHistory();
	}
	// 监听页面滚动到底部事件，实现分页加载
	onReachBottom(() => {
		// 如果当前状态不是“加载更多”，则不执行
		if (state.loading !== 'loadmore') {
			return;
		}
		state.page++;
		getJoinHistory();
	});
	
	// 获取账户历史记录
	async function getJoinHistory() {
		state.loading = 'loading';
		await commonAPI.joinHistory({
			page: state.page,
			pagesize: state.pageSize, // 如果接口支持自定义每页数量
		}).then(res => {
			if (res.code === REQUEST_SUCCESS && res.data) {
				const {
					data,
					pagination
				} = res.data;
				// 将新数据追加到列表中
				state.list = [...state.list, ...data];
				// 更新分页信息和加载状态
				if (pagination.pages > pagination.page) {
					state.loading = 'loadmore';
				} else {
					state.loading = 'nomore';
				}
				console.log(state.list)
				// state.list.forEach(item => {
				// 	item.address = null
				// })
				uni.hideLoading()
			} else {
				uni.hideLoading()
				state.loading = 'nomore';
				uni.showToast({
					title: res.message || '加载失败',
					icon: 'none'
				});
			}
		}).catch(err => {
			state.loading = 'nomore';
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			});
			console.error('加载账户历史失败', err);
		});
	}
	function getAddress(aid) {
	  uni.chooseAddress({
		success: (res) => {
		console.log('地址选择成功', res);
		// state.address=res.userName + res.telNumber+ res.provinceName+ res.cityName+ res.countyName+ res.detailInfo+ res.postalCode
		commonAPI.luckyCash({
			aid:aid,
			province_name:res.provinceName,
			city_name:res.cityName,
			region:res.countyName,
			address:res.detailInfo,
			contact:res.userName,
			phone:res.telNumber,
		}).then(res=>{
			if(res.code===REQUEST_SUCCESS){
				uni.showToast({
					title:'地址确认成功'
				})
				reloadHistory()
			}
		})
		},
		fail: (err) => {
		  console.error('地址选择失败', err);
		  if (err.errMsg.includes('cancel')) {
			// uni.showToast({ title: '您取消了选择', icon: 'none' });
		  }
		}
	  });
	}
	function toDetail(id){
		uni.navigateTo({
			url:'/pages/history/luckDetail?id=' + id
		})
	}
	function copyNum(num){
		uni.setClipboardData({
			data:num,
			success: function () {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				});
			}
		});
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
	}
</style>
